<script>
import collection from "@/practice/pages/index/components/collection.vue"
import common from "@/practice/pages/index/components/common"
import correctionIcon from "../../assets/correction.png"
import successIcon from "../../assets/success.png"
import setting from "../setting.vue"
import settingIcon from "../../assets/setting.png"
import scoreIcon from "../../assets/score.png"
import userScore from "../userScore.vue"
import { valIsEmpty } from "@/utils"

export default {
  name: "footer",
  methods: { valIsEmpty },
  components: { collection, setting, userScore },
  data() {
    return {
      common,
      details: null,
      correctionIcon,
      successIcon,
      settingIcon,
      scoreIcon,
    }
  },
  inject: ["root"],
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.details = this.root.details
  },
  emits: ["submit"],
}
</script>

<template>
  <view class="component">
    <!--		设置-->
    <view class="btn-item" @click="$refs.setting.open()">
      <image class="icon" :src="settingIcon"></image>
      <view class="text">设置</view>
    </view>
    <setting ref="setting"></setting>
    <!--			收藏-->
    <view class="btn-item">
      <collection :isCollectedProps="details.existFavorite" :structure-id="details.structureId"></collection>
    </view>
    <!--			纠错-->
    <view class="btn-item" @click="common.handleCorrectQuestion(details.structureId)">
      <image class="icon" :src="correctionIcon"></image>
      <view class="text">纠错</view>
    </view>
    <!--			提交-->
    <view class="btn-item" @click="$emit('submit')" v-if="!viewAnalysis">
      <image class="icon" :src="successIcon"></image>
      <view class="text">完成作答</view>
    </view>
    <!--		自评分-->
    <!--		写作题型-->
    <template v-if="viewAnalysis">
      <userScore
        class="user-score"
        v-if="details.typeCode === 'WRITING' && details.writing && details.writing.userDoTopicId"
        ref="userScore"
        @submit="() => root.getRecord()"
        :score-prop="details.writing.userScore"
        :max-score="details.questionScore"
        :user-do-topic-id="details.writing.userDoTopicId"
      >
        <view class="btn-item wide" style="width: 100%; height: 100%">
          <image class="icon" :src="scoreIcon"></image>
          <view class="text">
            <text>自评分</text>
            <text v-if="!valIsEmpty(details.writing.userScore)">：{{ details.writing.userScore }}</text>
          </view>
        </view>
      </userScore>
      <!--		翻译题型-->
      <userScore
        class="user-score"
        v-else-if="details.typeCode === 'CET_TRANSLATE' && details.cetTranslate && details.cetTranslate.userDoTopicId"
        ref="userScore"
        @submit="() => root.getRecord()"
        :score-prop="details.cetTranslate.userScore"
        :max-score="details.questionScore"
        :user-do-topic-id="details.cetTranslate.userDoTopicId"
      >
        <view class="btn-item wide" style="width: 100%; height: 100%">
          <image class="icon" :src="scoreIcon"></image>
          <view class="text">
            <text>自评分</text>
            <text v-if="!valIsEmpty(details.cetTranslate.userScore)">：{{ details.cetTranslate.userScore }}</text>
          </view>
        </view>
      </userScore>
    </template>
  </view>
</template>

<style scoped lang="scss">
.component {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: calc(130rpx * var(--font-size-rate) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  background: white;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 30rpx;
  padding-right: 30rpx;
  border-top: 2rpx solid var(--border-color);
  z-index: 100;
  .btn-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(20% * var(--font-size-rate));
    > .icon {
      width: calc(50rpx * var(--font-size-rate));
      height: calc(50rpx * var(--font-size-rate));
    }
    > .text {
      margin-top: calc(10rpx * var(--font-size-rate));
      font-size: calc(30rpx * var(--font-size-rate));
    }
    &.wide {
      width: calc(30% * var(--font-size-rate));
      > .text {
        font-size: calc(28rpx * var(--font-size-rate));
      }
    }
  }
  .user-score {
    width: calc(30% * var(--font-size-rate));
  }
}
</style>
